<template>
  <div class="component-discountInfo">
    <el-dialog
      v-model="visible"
      :title="$t('groups.activityDetails')"
      :close-on-click-modal="false"
      width="950px"
    >
      <el-form
        ref="dataFormRef"
        class="component-discountInfo-box"
        :model="dataForm"
        :disabled="true"
        :label-width="
          $t('language') === 'language' ? '180px' : '120px'
        "
        style="width: 850px"
        @submit.prevent
      >
        <el-form-item
          :label="$t('seckill.activityName')"
          prop="discountName"
          :rules="[{ required: true, message: $t('publics.noNull') }]"
        >
          <el-input
            v-model="dataForm.discountName"
            :placeholder="$t('seckill.activityName')"
          />
        </el-form-item>
        <el-form-item
          :label="$t('marketing.mobiltyDiagram')"
        >
          <img-show
            :src="dataForm.mobilePic"
            :class-list="['pic']"
          />
        </el-form-item>
        <el-form-item
          :label="$t('marketing.pcActivityListChart')"
        >
          <img-show
            :src="dataForm.pcPic"
            :class-list="['pic']"
          />
        </el-form-item>
        <el-form-item
          :label="$t('marketing.pcActiviroundMap')"
        >
          <img-show
            :src="dataForm.pcBackgroundPic"
            :class-list="['pic']"
          />
        </el-form-item>

        <el-form-item
          :label="$t('seckill.activityTimeRange')"
          class="tableEn"
        >
          <el-col :span="8">
            <el-form-item
              prop="startTime"
              :rules="[{ required: true, message: $t('publics.noNull') }]"
            >
              <el-date-picker
                v-model="dataForm.startTime"
                type="datetime"
                :placeholder="$t('discount.chooseStartDate')"
                value-format="YYYY-MM-DD HH:mm:ss"
              />
            </el-form-item>
          </el-col>
          <el-col
            :span="1"
            :class="[$t('language')==='language'?'timeLine':'']"
          >
            -
          </el-col>
          <el-col :span="8">
            <el-form-item
              prop="endTime"
              :rules="[{ required: true, message: $t('publics.noNull') }]"
            >
              <el-date-picker
                v-model="dataForm.endTime"
                type="datetime"
                :placeholder="$t('discount.chooseEndDate')"
                value-format="YYYY-MM-DD HH:mm:ss"
              />
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item
          :label="$t('marketing.typeOfActivity')"
          prop="discountRule"
        >
          <el-radio-group v-model="dataForm.discountRule">
            <el-radio :label="0">
              {{ $t("marketing.fullMoneoney") }}
            </el-radio>
            <el-radio :label="2">
              {{
                $t("marketing.fullMoneyDiscount")
              }}
            </el-radio>
            <el-radio :label="3">
              {{ $t("marketing.fullDiscount") }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          v-if="dataForm.discountRule === 0 || dataForm.discountRule === 1"
          :label="$t('marketing.typeOfExemption')"
          prop="discountType"
        >
          <el-radio-group
            v-model="dataForm.discountType"
            @change="discountTypeChange"
          >
            <el-radio :label="0">
              {{
                $t("marketing.decreaseOestLevel")
              }}
            </el-radio>
            <el-radio :label="1">
              {{ $t("marketing.decreaeryTime") }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          :label="$t('marketing.maximumDiscountAmount')"
          prop="maxReduceAmount"
          :rules="[{ required: true, message: $t('publics.noNull') }]"
        >
          <el-input
            v-model="dataForm.maxReduceAmount"
            :placeholder="$t('marketing.maximumDiscountAmount')"
          />
        </el-form-item>
        <!-- 卡片 START -->
        <el-form-item :label="$t('marketing.offerContent')">
          <el-card
            v-for="(discountItem, index) in dataForm.discountItems"
            :key="discountItem.discountItemId"
            class="box-card"
            style="margin-bottom: 30px"
          >
            <template #header>
              <div
                v-if="!dataForm.discountType"
                class="clearfix"
              >
                <span>{{ $t("marketing.activityLevel") }} {{ index + 1 }}</span>
                <el-button
                  v-if="dataForm.discountItems.length > 1"
                  style="float: right; padding: 3px 0"
                  type="text"
                  @click="deleteActivityClass(index)"
                >
                  {{ $t("brand.delete") }}
                </el-button>
              </div>
            </template>
            <!-- 条件 -->
            <el-form-item
              class="text item"
              :label="$t('common.condition')"
              style="margin-bottom: 20px"
              :rules="[{ required: true, message: $t('publics.noNull') }]"
            >
              {{ $t("marketing.everyFull") }}
              <el-input
                v-model="discountItem.needAmount"

                style="width: 200px"
              >
                <template #append>
                  {{ discountItemTexts[0] }}
                </template>
              </el-input>
            </el-form-item>
            <el-form-item
              class="text item"
              :label="$t('marketing.discount')"
              :rules="[{ required: true, message: $t('publics.noNull') }]"
            >
              <span v-if="dataForm.discountRule < 2">&nbsp;&nbsp;&nbsp;&nbsp;{{ $t("marketing.reducea") }}</span>
              <span v-else>&nbsp;&nbsp;&nbsp;&nbsp;{{ $t("marketing.dozen") }}</span>
              <el-input
                v-model="discountItem.discount"

                style="width: 200px"
              >
                <template #append>
                  {{ discountItemTexts[1] }}
                </template>
              </el-input>
            </el-form-item>
          </el-card>
        </el-form-item>
        <!-- 卡片 END -->
        <el-form-item
          :label="$t('marketing.applicableProductType')"
          prop="suitableProdType"
          :rules="[{ required: true, message: $t('publics.noNull') }]"
        >
          <el-radio-group v-model="dataForm.suitableProdType">
            <el-radio :label="0">
              {{
                $t("coupon.allProductsParticipate")
              }}
            </el-radio>
            <el-radio :label="1">
              {{
                $t("coupon.participateInDesignatedProd")
              }}
            </el-radio>
            <el-radio :label="2">
              {{
                $t("coupon.specifiedProductsDoNotParticipate")
              }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          v-if="dataForm.suitableProdType !== 0"
        >
          <div class="prod-box">
            <div
              v-for="(discountProd, index) in dataForm.discountProds"
              :key="index"
              class="prod-box-item"
            >
              <el-card
                :body-style="{ padding: '0px' }"
                style="height: 160px; width: 120px"
              >
                <prod-pic
                  height="104px"
                  width="100%"
                  :pic="discountProd.pic"
                />
                <div class="card-prod-bottom">
                  <span class="card-prod-name">{{
                    discountProd.prodName
                  }}</span>
                  <el-button
                    type="text"
                    class="card-prod-name-button"
                    @click="deleteProd(index)"
                  >
                    {{ $t("remindPop.delete") }}
                  </el-button>
                </div>
              </el-card>
            </div>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button
            v-if="
              dataForm.suitableProdType === 1 || dataForm.suitableProdType === 2
            "
            plain
            @click="prodsSelectHandle()"
          >
            {{ $t("product.select") }}
          </el-button>
        </el-form-item>
        <!-- 商品 -->
        <el-form-item
          :label="$t('product.status')"
          prop="status"
        >
          <el-radio-group v-model="dataForm.status">
            <el-radio :label="1">
              {{ $t("seckill.open") }}
            </el-radio>
            <el-radio :label="0">
              {{ $t("seckill.close") }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <div
            class="default-btn primary-btn"
            @click="visible = false"
          >
            {{ $t("remindPop.confirm") }}
          </div>
        </div>
      </template>
      <!-- 商品选择弹窗-->
      <prods-select
        v-if="prodsSelectVisible"
        ref="prodsSelectRef"
        @refresh-select-prods="selectDiscountProds"
      />
    </el-dialog>
  </div>
</template>

<script setup>
const discountItemTexts = computed(() => {
  const texts = []
  if (dataForm.value.discountRule === 0 || dataForm.value.discountRule === 2) {
    texts[0] = $t('coupon.yuan')
  } else {
    texts[0] = $t('order.piece')
  }
  if (dataForm.value.discountRule === 0 || dataForm.value.discountRule === 1) {
    texts[1] = $t('coupon.yuan')
  } else {
    texts[1] = $t('marketing.fold')
  }
  return texts
})

const dataForm = ref({
  discountId: 0,
  discountName: '',
  discountRule: 0,
  discountType: 0,
  suitableProdType: 0,
  maxReduceAmount: 0,
  shopId: '',
  startTime: '',
  endTime: '',
  status: 0,
  discountItems: [],
  discountProds: []
})

watch(
  () => dataForm.value.discountRule,
  (val) => {
    if (val === 2 || val === 3) {
      dataForm.value.discountType = 0
    }
  }
)
const visible = ref(false)
const init = (discountId) => {
  dataForm.value.discountId = discountId || null
  visible.value = true
  nextTick(() => {
    if (dataForm.value.discountId) {
      http({
        url: http.adornUrl(`/platform/discount/info/${dataForm.value.discountId}`),
        method: 'get',
        params: http.adornParams()
      })
        .then(({ data }) => {
          dataForm.value = data
        })
    }
  })
}
defineExpose({ init })

/**
 * 删除活动层级
 * @param index
 */
const deleteActivityClass = (index) => {
  dataForm.value.discountItems.splice(index, 1)
}

/**
 * 删除指定商品
 * @param index
 */
const deleteProd = (index) => {
  dataForm.value.discountProds.splice(index, 1)
}

const prodsSelectVisible = ref(false)
const dataFormRef = ref(null)
const prodsSelectRef = ref(null)
/**
 * 显示添加指定商品弹框
 */
const prodsSelectHandle = () => {
  prodsSelectVisible.value = true
  nextTick(() => {
    prodsSelectRef.value.init(dataFormRef.value?.discountProds)
  })
}

/**
 * 添加指定商品
 * @param prods
 */
const selectDiscountProds = (prods) => {
  if (prods) {
    dataForm.value.discountProds = prods
  }
}

const discountTypeChange = () => {
  dataForm.value.discountItems = [{}]
}

</script>

<style lang="scss" scoped>
.prod-box {
  display: flex;
  flex-wrap: wrap;
}
.prod-box-item {
  margin-right: 10px;
  margin-bottom: 10px;
}
 :deep(.el-form-item__content .el-col-8) {
    flex: 0 0 auto;
  }
.component-discountInfo-box :deep(.pic){
  object-fit: contain;
  width: 120px !important;
  height: 120px !important;
}
</style>
